<template>
	<!-- 主容器 -->
	<view class="container" style="border: none;">
		<!-- 轮播图部分 -->
		<view class="shouYe">
			<swiper :autoplay="true" interval="4000" duration="800" indicator-dots circular class="swiper"
				style="height: 200px;">
				<!-- 循环渲染每张图片 -->
				<swiper-item v-for="(image, index) in carouselImages" :key="index">
					<image :src="image" class="carousel-image" mode="aspectFill" /> <!-- 轮播图的每张图片 -->
				</swiper-item>
			</swiper>
		</view>

		<!-- 日历部分 -->
		<view class="calendar-wrapper" ref="calendarWrapper">
			<!-- 星期名称行 -->
			<view class="week-days">
				<!-- 循环渲染星期名称 -->
				<view class="day-name-card" v-for="(name, index) in dayNames" :key="index">
					{{ name }}
				</view>
			</view>
			<!-- 日期行 -->
			<view class="week-dates" style="height: 50;">
				<!-- 循环渲染每一天的日期 -->
				<view v-for="(day, index) in weekDays" :key="index"
					:class="['day-card', { 'active-day': isSelected(day), 'disabled': isDisabled(day) }]"
					:data-date="day.date" @click="selectDay(day)">
					{{ day.date }}
				</view>
			</view>
		</view>

		<!-- 活动列表部分 -->
		<view class="list">
			<!-- 循环渲染每个活动项 -->
			<view class="item" v-for="(item, index) in datelist" :key="index">
				<!-- 活动图片部分 -->
				<view class="activity-image-container">
					<image :src="item.images[0]" class="activity-image" /> <!-- 显示活动的图片 -->
				</view>
				<!-- 活动详细信息部分 -->
				<view class="info">
					<!-- 活动标题和报名状态 -->
					<view class="title">
						{{ item.title }}
						<!-- 显示报名状态，使用不同的样式类显示不同的状态 -->
						<view class="registration-status"
							:class="{'active': item.status === '报名中', 'ended': item.status === '报名结束', 'full': item.status === '活动结束'}">
							{{ item.status }}
						</view>
					</view>
					<!-- 活动位置和距离 -->
					<view class="location">
						<image src="/static/lushu.png" class="icon" />
						路线：{{ item.location }} | {{ item.distance }}
					</view>
					<!-- 活动时间 -->
					<view class="time">
						<image src="/static/Clock.png" class="icon" />
						时间：{{ item.time }}
					</view>
					<!-- 活动类型 -->
					<view class="type">
						<image src="/static/ridetype.png" class="icon" />
						类型：{{ item.type }}
					</view>
					<!-- 活动特点 -->
					<view class="features">特点：
						<span v-for="(feature, fIndex) in item.features" :key="fIndex" class="feature-item">
							{{ feature }}
						</span>
					</view>
				</view>
			</view>
		</view>
		
		 <view class="fixed-element">
			 <view style="width: 40px; height: 40px;" @click="goToProfile()">
				 <image src="../../static/xinzeng4.png" style="width: 40px;height: 40px;"></image>
			 </view> 
		</view>  
	</view>
</template>

<script>
	export default {
		name: 'ren-calendar',
		props: {
			// 轮播图图片数组
			carouselImages: {
				type: Array,
				default: () => ['/static/ride17.png', '/static/ride16.png', '/static/ride15.png']
			},
			// 一周的开始日，0为周日，1为周一
			weekstart: {
				type: Number,
				default: 1
			},
			// 特殊标记的日期数组
			markDays: {
				type: Array,
				default: () => []
			},
			// 是否开启
			open: {
				type: Boolean,
				default: true
			},
			// 是否可折叠
			collapsible: {
				type: Boolean,
				default: true
			},
			// 是否禁用之后的日期
			disabledAfter: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const today = new Date(); // 获取今天的日期对象
			return {
				searchQuery: '', // 搜索查询字符串
				datelist: this.getSampleData(), // 活动列表数据
				weekDays: this.getWeekDays(), // 一周的日期数据
				dayNames: ['日', '一', '二', '三', '四', '五', '六'], // 星期名称
				selectedDay: { // 当前选中的日期
					date: today.getDate(),
					month: today.getMonth() + 1,
					year: today.getFullYear()
				}
			};
		},
		mounted() {
			// 添加全局点击事件监听
			document.addEventListener('click', this.handleClickOutside);
			this.fetchActivities(); // 页面加载时获取活动列表
			this.selectDay(this.selectedDay); // 页面加载时默认选中今天的日期
			this.selectDay(this.selectedDay); // 页面加载时默认选中今天的日期

		},
		beforeDestroy() {
			// 移除全局点击事件监听
			document.removeEventListener('click', this.handleClickOutside);
		},
		methods: {
			// 使用 AJAX 从后台获取活动数据
			fetchActivities() {
				console.log("向后台获取数据");
				uni.request({
					url: 'https://your-backend-api-url.com/getActivities', // 替换为你的后台API URL
					method: 'GET',
					success: (response) => {
						if (response.statusCode === 200) {
							this.datelist = response.data.activities; // 假设返回的数据在 `response.data.activities` 中
						} else {
							console.error('获取活动失败:', response);
						}
					},
					fail: (error) => {
						// 模拟数据，替换为实际数据获取逻辑
						this.datelist = [{
								id: 1,
								title: '用烟火气下酒',
								location: 'Boskey House | 36.8km',
								time: '05月09日 周四 18:00-20:00',
								images: ['/static/yanhuo.png'],
								text: '12/15',
								name: '布旅不停',
								status: '报名中', // 添加活动状态  
								type: '耐力骑行', // 添加活动类型  
								features: ['风景优美', '休息区多', '赠送饮品'], // 添加活动特点  
							},
							{
								id: 2,
								title: '速爬凤凰岭-进阶活动',
								location: '北安河[地铁站]-A西北口 | 19.0km',
								time: '05月09日 周四 19:00-21:00',
								images: ['/static/yanhuo.png'],
								text: '2/10',
								name: '浪慢Club',
								status: '报名结束', // 添加活动状态  
								type: '公路竞速', // 添加活动类型  
								features: ['大户型', 'VR看房'], // 添加活动特点  
							},
							{
								id: 3,
								title: '特别活动',
								location: '活动中心 | 30.0km',
								time: '06月01日 周四 15:00-17:00',
								images: ['/static/yanhuo.png'],
								text: '已满',
								name: '赛事组',
								status: '活动结束', // 添加活动状态  
								type: '骑游活动', // 添加活动类型  
								features: ['高绿化率', '休息区多'], // 添加活动特点  
							},
						];
						console.error('获取活动失败:', error);
					}
				});
			},
			// 模拟数据生成
			getSampleData() {
				return Array(9).fill({
					id: '1',
					title: '用烟火气下酒',
					location: 'Boskey House | 36.8km',
					time: '05月09日 周四 18:00-20:00',
					images: ['/static/ride14.png'],
					text: '12/15',
					name: '布旅不停',
					status: '报名中', // 添加活动状态  
					type: '耐力骑行', // 添加活动类型  
					features: ['风景优美', '休息区多', '赠送饮品'], // 添加活动特点 
				}).map((item, index) => ({
					...item,
					id: (index + 1).toString()
				}));
			},
			// 获取当前周的日期数据
			getWeekDays() {
				const days = [];
				const today = new Date();
				let startOfWeek = today.getDate() - today.getDay() + (this.weekstart === 1 ? 0 : 1);
				for (let i = 0; i < 7; i++) {
					const date = new Date(today);
					date.setDate(startOfWeek + i);
					days.push({
						date: date.getDate(),
						month: date.getMonth() + 1,
						year: date.getFullYear()
					});
				}
				return days;
			},
			// 选中日期的方法
			selectDay(day) {
				// 移除之前选中日期的样式
				const previouslySelectedDay = document.querySelector('.active-day');
				if (previouslySelectedDay) {
					previouslySelectedDay.classList.remove('active-day');
					previouslySelectedDay.style.color = '#333'; // 恢复为正常颜色
					previouslySelectedDay.style.backgroundColor = '#fff'; // 恢复为正常背景颜色
					previouslySelectedDay.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)'; // 恢复为正常阴影
					previouslySelectedDay.style.borderBottom = '0px solid #757575';
				}

				// 更新选中的日期
				this.selectedDay = day;

				// 触发选中事件
				this.$emit('select', {
					year: day.year,
					month: day.month,
					date: day.date
				});
	// 转换 selectedDay 对象为 Date 对象
    const selectedDate = this.convertToDate(this.selectedDay);
				// 更新活动列表数据
				this.datelist = Array(9).fill({
					id: '1',
					title: '用烟火气下酒',
					location: 'Boskey House | 36.8km',
					time:  this.formatDate(selectedDate), // 使用 formatDate 方法,
					images: ['/static/ride14.png'],
					text: '12/15',
					name: '布旅不停',
					status: '报名中', // 添加活动状态  
					type: '耐力骑行', // 添加活动类型  
					features: ['风景优美', '休息区多', '赠送饮品'], // 添加活动特点 
				}).map((item, index) => ({
					...item,
					id: (index + 1).toString(),
					//time: JSON.stringify(this.selectedDay).toString()
				}));

				// 为当前选中日期的元素添加样式
				const selectedElement = document.querySelector(`.day-card[data-date="${day.date}"]`);
				if (selectedElement) {
					selectedElement.classList.add('active-day');
					selectedElement.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)'; // 设置选中日期的阴影效果
					selectedElement.style.borderBottom = '2px solid #757575'; // 这里的颜色和边框宽度可以根据需求调整
				}

				// 仅用于测试：打印选中的日期
				console.log("选中了：" + JSON.stringify(day) + "  ！！！");
			},
			convertToDate({ date, month, year }) {
			    return new Date(year, month - 1, date);
			  },
			formatDate(date) {
				if (!(date instanceof Date) || isNaN(date)) {
				      console.error('Invalid date:', date);
				      return '无效日期'; // 或其他默认值
				    }
			      const options = {
			        year: 'numeric',
			        month: '2-digit',
			        day: '2-digit',
			        weekday: 'short'
			      };
			      return new Intl.DateTimeFormat('zh-CN', options).format(date)
			        .replace(/\//g, '月').replace(/日/g, '日 ');
			    },
			// 判断是否为选中的日期
			isSelected(day) {

				return this.selectedDay &&
					this.selectedDay.date === day.date &&
					this.selectedDay.month === day.month &&
					this.selectedDay.year === day.year;
			},
			// 判断日期是否被禁用的方法
			isDisabled(day) {
				// 可以在这里添加逻辑来禁用某些日期
				return false;
			},
			// 处理点击外部区域事件
			// handleClickOutside(event) {
			// 	const calendarWrapper = this.$refs.calendarWrapper;
			// 	if (calendarWrapper && !calendarWrapper.contains(event.target)) {
			// 		this.selectedDay = null; // 点击外部区域时，取消选中的日期
			// 	}
			// },
			goToProfile() {
			  uni.navigateTo({ url: '/pages/Activity/Publishactivity/Publishactivity' });  
			}, 
		}
	};
</script>



<style scoped>
	/* 日历组件外层容器样式 */
	.calendar-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		background-color: #f5f5f5;
		/* 背景颜色 */
		border-radius: 8px;
		/* 圆角 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		color: #9e9e9e;
		/* 字体颜色 */
	}

	/* 星期名称行样式 */
	.week-days {
		display: flex;
		justify-content: space-between;
		/* 子元素均匀分布 */
		width: 100%;
		margin-bottom: 10px;
		/* 下边距 */
	}

	/* 星期名称卡片样式 */
	.day-name-card {
		flex: 1;
		background-color: #757575;
		/* 背景颜色 */
		color: #fff;
		/* 字体颜色 */
		text-align: center;
		padding: 8px;
		/* 内边距 */
		border-radius: 5px;
		/* 圆角 */
		margin: 0 5px;
		/* 外边距 */
		font-weight: bold;
		/* 加粗字体 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	/* 日期卡片样式 */
	.week-dates {
		display: flex;
		justify-content: space-between;
		/* 子元素均匀分布 */
		width: 100%;
		height: 50px;
	}

	.day-card {
		flex: 1;
		background-color: #fff;
		/* 背景颜色 */
		color: #333;
		/* 字体颜色 */
		text-align: center;
		padding: 12px;
		/* 内边距 */
		border-radius: 5px;
		/* 圆角 */
		margin: 0 5px;
		/* 外边距 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		cursor: pointer;
		/* 鼠标悬停样式 */
		transition: all 0.3s ease;
		/* 动画效果 */
	}








	/* 全局样式，容器的宽度和高度 */
	.container {
		width: 100%;
		height: 100%;
	}

	/* 轮播图区域容器样式 */
	.shouYe {
		width: 100%;
		height: 200px;
	}

	/* 轮播图内图片样式 */
	.carousel-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持图片比例，裁剪溢出部分 */
	}

	/* 日历组件 - 星期名称容器样式 */
	.week-days,
	.week-dates {
		display: flex;
		justify-content: space-between;
		/* 子元素均匀分布 */
		padding: 10px;
		background-color: #fff;
	}

	/* 日历组件 - 星期名称样式 */
	.day-name,
	.day-item {
		flex: 1;
		/* 每个元素均匀分布空间 */
		text-align: center;
		/* 文本居中 */
		font-size: 16px;
		line-height: 40px;
		/* 控制元素的高度 */
		font-weight: bold;
		/* 加粗字体 */
		cursor: pointer;
		/* 鼠标悬停时显示手型 */
	}

	/* 日历组件 - 当前选中日期的样式 */
	.day-item.active-day {
		border-bottom: 2px solid #757575;
		/* 底部边框 */
		color: #757575;
		/* 字体颜色 */
	}

	/* 日历组件 - 禁用日期的样式 */
	.day-item.disabled {
		color: #ccc;
		/* 灰色字体 */
		cursor: not-allowed;
		/* 鼠标悬停时显示禁止符号 */
	}

	/* 活动列表部分 - 活动列表容器样式 */
	.list {
		display: flex;
		flex-direction: column;
		/* 子元素垂直排列 */
		gap: 20rpx;
		/* 子元素之间的间距 */
		padding: 10px;
	}

	/* 活动列表部分 - 每个活动项的样式 */
	.item {
		display: flex;
		/* 子元素水平排列 */
		gap: 20rpx;
		/* 子元素之间的间距 */
		background-color: #fff;
		padding: 20rpx;
		/* 内边距 */
		border-radius: 10rpx;
		/* 圆角边框 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		align-items: center;
		/* 垂直居中 */
	}

	/* 活动列表部分 - 活动图片容器样式 */
	.activity-image-container {
		flex-shrink: 0;
		/* 防止图片容器缩小 */
	}

	/* 活动列表部分 - 活动图片样式 */
	.activity-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 5px;
		/* 图片圆角 */
	}

	/* 活动列表部分 - 活动信息样式 */
	.info {
		display: flex;
		flex-direction: column;
		/* 子元素垂直排列 */
		width: 500rpx;
	}

	/* 活动列表部分 - 图标样式 */
	.icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
		/* 图标与文本之间的间距 */
	}

	/* 活动列表部分 - 活动标题样式 */
	.title {
		font-size: 30rpx;
		font-weight: bold;
		/* 加粗字体 */
		color: #333;
		display: flex;
		/* 子元素水平排列 */
		justify-content: space-between;
		/* 两边对齐 */
		align-items: center;
		/* 垂直居中 */
	}

	/* 活动列表部分 - 报名状态样式 */
	.registration-status {
		font-size: 20rpx;
		font-weight: bold;
		/* 加粗字体 */
	}

	/* 活动列表部分 - 不同报名状态的颜色样式 */
	.registration-status.active {
		color: green;
		/* 正在报名，绿色 */
	}

	.registration-status.ended {
		color: orange;
		/* 报名结束，橙色 */
	}

	.registration-status.full {
		color: red;
		/* 活动结束，红色 */
	}

	/* 活动列表部分 - 活动地点和时间样式 */
	.location,
	.time {
		font-size: 25rpx;
		color: #666;
		/* 灰色字体 */
	}

	/* 活动列表部分 - 活动特点容器样式 */
	.features {
		font-size: 20rpx;
		color: #333;
		/* 深色字体 */
		margin-top: 5rpx;
		/* 上边距 */
	}

	/* 活动列表部分 - 单个活动特点样式 */
	.feature-item {
		background-color: #e0e0e0;
		/* 背景色 */
		border-radius: 5rpx;
		/* 圆角 */
		padding: 5rpx 10rpx;
		/* 内边距 */
		margin-right: 5rpx;
		/* 右边距 */
	}

	/* 搜索框部分 - 搜索框容器样式 */
	.search-wrapper {
		position: relative;
		/* 相对定位 */
		margin-bottom: 10px;
		/* 下边距 */
	}

	/* 搜索框部分 - 搜索输入框样式 */
	.search-input {
		width: 100%;
		height: 40px;
		padding: 0 50px 0 15px;
		/* 内边距 */
		font-size: 16px;
		color: #333;
		/* 深色字体 */
		border: 1px solid #ddd;
		/* 边框颜色 */
		border-radius: 5px;
		/* 圆角 */
	}

	/* 搜索框部分 - 搜索输入框提示文本样式 */
	.search-input::placeholder {
		color: #999;
		/* 灰色提示文字 */
	}

	/* 搜索框部分 - 搜索输入框聚焦状态样式 */
	.search-input:focus {
		border-color: #4CAF50;
		/* 聚焦状态边框颜色 */
		outline: none;
		/* 去除默认的聚焦边框 */
	}

	/* 搜索框部分 - 清除按钮样式 */
	.clear-icon {
		position: absolute;
		/* 绝对定位 */
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		/* 垂直居中 */
		cursor: pointer;
		/* 鼠标悬停时显示手型 */
	}

	/* 响应式设计 - 针对最大宽度为768px的屏幕 */
	@media (max-width: 768px) {
		.search-input {
			height: 35px;
			font-size: 14px;
			/* 较小的字体 */
		}
	}
	.fixed-element {  
            position: fixed;  
            bottom: 100px; /* 距离底部20px */  
            right: 10px; /* 距离右侧20px */   
            color: white;  
            padding: 10px;  
            border-radius: 5px;  
        }  
</style>